<extend name="template/base_index" />

<block name="area_header">
    <link rel="stylesheet" type="text/css" media="all" href="__CDN__/jquery-datetimepicker/jquery.datetimepicker.css">
    <script type="text/javascript" src="__CDN__/jquery-datetimepicker/jquery.datetimepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="__CDN__/comp/wxuploader.css" />
    <link type="text/css" rel="stylesheet" href="__CDN__/jquery-uploadify/3.2.1/uploadify.css" />
    <script type="text/javascript" src="__CDN__/jquery-uploadify/3.2.1/jquery.uploadify.min.js"></script>
    <style type="text/css">
        .banner.wxuploaderimg {
            width: 320px;
            height: 100px;
        }
        .banner.wxuploaderimg .img-preview img{
            width: 320px;
        }
    </style>
</block>

<block name="area_body">
    {:W('Menus/topbar')}
    <div class="admin-main container-fluid">
        {:W('Menus/left')}
        <div class="admin-main-content">
            {:W('Menus/breadcrumb')}

            <!-- 带验证 form -->
            <form class="form-horizontal well validateForm">
                <fieldset>
                    <legend>
                        Banners添加
                    </legend>
                    <div class="form-group">
                        <label for="inputtitle" class="col-md-2 col-lg-2 control-label">图片标题</label>
                        <div class="col-md-10 col-lg-10">
                            <input type="text" class="required form-control input-short" name="title" id="title" placeholder="请给图片起个标题或默认">
                            <div class="help-block">(给图片起个标题或默认)</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputtitle" class="col-md-2 col-lg-2 control-label">所在类别或位置</label>
                        <div class="col-md-10 col-lg-10">
                            <select name="position" class="form-control  input-normal" >
                                {:W("Partials/datatree",array(getDatatree('BBS_BANNERS_TYPE'),true))}
                            </select>
                            <div class="help-block">(选择类别或位置)</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputtitle" class="col-md-2 col-lg-2 control-label">图片地址</label>
                        <div class="col-md-10 col-lg-10">
                            <input type="hidden" class="" name="img" id="img" placeholder="请给图片起个标题或默认">
                            <!-- 图片选择DOM结构 -->
                            <div class="wxuploaderimg clearfix banner" data-maxitems="1">
                                <div class="img-preview clearfix" >

                                </div>
                                <div class="add">
                                    <i class="fa fa-plus"></i>
                                </div>
                            </div>
                            <!-- 图片选择DOM结构 -->

                            <div class="help-block">(上传图片,尺寸：640像素*200像素)</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputtitle" class="col-md-2 col-lg-2 control-label">跳转链接类型</label>
                        <div class="col-md-10 col-lg-10">
                            <select name="url_type" class="form-control  input-normal" >
                                {:W("Partials/datatree",array(getDatatree('BANNERS_URL_TYPE'),true))}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputtitle" class="col-md-2 col-lg-2 control-label">点击图片跳转链接<br/>(选填)</label>
                        <div class="col-md-10 col-lg-10">
                            <input name="url" class="form-control" type="text" />
                            <div class="help-block">(点击图片跳转链接，完整的链接地址)</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputtitle" class="col-md-2 col-lg-2 control-label">图片描述（选填）</label>
                        <div class="col-md-10 col-lg-10">
                            <textarea name="notes" class="form-control" rows="5"></textarea>
                            <div class="help-block">(图片描述)</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="sort" class="col-md-2 col-lg-2 control-label">图片排序序号</label>
                        <div class="col-md-10 col-lg-10">
                            <input name="sort" class="form-control" type="text" value="1" />
                            <div class="help-block">(图片排序序号)</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 col-lg-2 control-label">&nbsp;</label>
                        <div class="col-lg-10 col-md-10">
                            <a target-form="validateForm" onclick="getData();" class="ajax-post btn btn-primary" href="{:U('Admin/BbsBanners/add')}" autofocus="autofocus"><i class="fa fa-save"></i>保存</a>
                            <a class="btn btn-default" href="{:U('Admin/BbsBanners/index')}">
                                <i class="fa fa-reply"></i>								返回</a>
                        </div>
                    </div>
                </fieldset>
            </form>
            <!-- form -->
            <include file="template/wxpicture" />
        </div>
        <!-- END admin-main-content -->
    </div>
    <!-- END admin-main-->
</block>

<block name="area_footer">
    <script type="text/javascript">
        function getData(){
            var img = $(".wxuploaderimg img").attr("data-imageid");
            $("#img").val(img);
        }

        $(function(){
            wxuploadimg.init({cont:".wxuploaderimg"});
        });
    </script>
</block>